<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="wap-font-scale" content="no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>商品-订单详情</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../css/swiper.min.css">
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/app.css?a=1111"/>
</head>
<body class="isHide">
<div class="ft-wrap height top">
    <!--顶部悬浮导航-->
    <div class="ft-head-nav">
        <a class="ft-h-back" href="javascript:;">返回</a>
        <span class="ft-head-text">Order Detail</span>
    </div>
    <!--中间滚动内容-->
    <div class="ft-container no-padding height background">
        <div class="ft-overflow">
            <div class="my-order-bar order-detail-bar">
                <div class="ft-module no-mar no-top orderDetails-module">
                    <div class="module-hd">
                        <a class="module-link" href="#">
                            <span>Sold By:</span>
                            <label>ZEVAR Store</label>
                        </a>
                    </div>
                    <div class="module-bd no-pad">
                        <div class="order-intro">
                            <ul class="order-list">
                                <li>
                                    <a href="#">
                                        <div class="order-cont">
                                            <label class="order-img"><img src="../img/product5.jpg"></label>
                                            <div class="order-detail">
                                                <label class="order-name t-clamp">Fashion Stainless Steel Practice Trang
                                                    Butterfly KnifePrace</label>
                                                <label class="order-sort">Brown, 15.6</label>
                                                <label class="order-money color-orange t-normal">US$20.00<span>x1</span></label>
                                                <label class="order-result color-orange">Return failed</label>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="order-cont">
                                            <label class="order-img"><img src="../img/product2.jpg"></label>
                                            <div class="order-detail">
                                                <label class="order-name t-clamp">Fashion Stainless Steel Practice Trang
                                                    Butterfly KnifePrace</label>
                                                <label class="order-sort">Brown, 18.6</label>
                                                <label class="order-money color-orange t-normal">US$200.00<span>x2</span></label>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="ft-module no-top pay-module">
                    <div class="module-bd no-pad">
                        <div class="order-cost">
                            <div class="cost-item pad-big">
                                <a href="#">
                                    <span class="cost-name">Refund information</span>
                                    <span class="cost-total">Waiting for buyers return</span>
                                    <i class="ft-sprite arrow-icon"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ft-module total-module">
                    <div class="module-hd">
                        <label>Order Information</label>
                    </div>
                    <div class="module-bd">
                        <div class="total-bar">
                            <p>
                                <span>Order Number:</span>
                                <span class="float-right">123545225522</span>
                            </p>
                            <p>
                                <span>Order Status:</span>
                                <span class="float-right color-orange">Request a refund</span>
                            </p>
                            <p>
                                <span>Order Date:</span>
                                <span class="float-right">2017-02-22 00:24:47</span>
                            </p>
                            <p>
                                <span>Logistics company:</span>
                                <span class="float-right">EMS</span>
                            </p>
                            <p>
                                <span>Tracking Number:</span>
                                <span class="float-right">737372843</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="ft-module total-module">
                    <div class="module-hd">
                        <label>Total</label>
                    </div>
                    <div class="module-bd">
                        <div class="total-bar">
                            <p>
                                <span>Order subtotal:</span>
                                <span class="float-right">US$120.00</span>
                            </p>
                            <p>
                                <span>Shipping fee:</span>
                                <span class="float-right color-orange">US$3.50</span>
                            </p>
                            <p>
                                <span>Discount:</span>
                                <span class="float-right">- US$3.50</span>
                            </p>
                            <p class="total-specail t-size14">
                                <span>Grand Total:</span>
                                <span class="float-right">US$120.00</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="ft-module total-module">
                    <div class="module-hd">
                        <label>Shipping Address</label>
                    </div>
                    <div class="module-bd">
                        <div class="total-bar">
                            <p class="mar-t15">
                                <span>Zhuang Shibin</span>
                            </p>
                            <p class="mar-b15">
                                <span class="color-gray-666">Ostest 33 Ostest American Samoa 111 United States United States</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="order-infor-tips">
                    <span class="none-more-tips">Without more information</span>
                </div>
                <div class="order-cost background">
                    <div class="cost-item">
                        <div class="order-handle clearfix">
                            <div class="float-right">
                                <a class="ft-btn" href="javascript:;">Request a refund</a>
                                <a class="ft-btn" href="javascript:;">Cancel Order</a>
                                <a class="ft-btn line" href="javascript:;">Confirm receipt</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/box.js"></script>
<script src="../js/ft-common.js"></script>
<script src="../js/pageScript.js"></script>
<script>
    $(function () {
        //弹出框
        $(".buy-btn").click(function () {
            if ($(".pay-list li:eq(0)").find(".ft-radio").hasClass("active")) {
                var money = $(".buy-money span").text();
                var payStr = "\
                    <div class='pay-disk'>\
                        <p class='pay-money'><span>Total amount :</span>" + money + "</p>\
                        <label class='pay-password'><input type='password' value='' placeholder='Payment Password'></label>\
                        <span class='pay-tips'>First enter the password will be set as your default payment of a password.</span>\
                    </div>\
                   ";
                $.jConfirm({
                    title: "Paid by Wallet Balance",
                    intro: payStr
                }, [
                    {
                        text: "Cancel",
                        css: {
                            "color": "#666666"
                        }
                    },
                    {
                        text: "Place Order",
                        callback: function () {
                            console.log("付款咯~");
                        }
                    }
                ], "H", "", {
                    width: 250,
                    titleCss: {"borderBottom": "1px solid #dcdcdc", "padding": "13px 0 10px 0", "margin": "0"},
                    tipsBarCss: {"paddingBottom": "0"}
                });
            }
        });
        //单选
        selectRadio(".pay-list li");
        //下拉框
        var $selcet = $(".form-select select");
        $selcet.change(function () {
            var _val = $(this).find("option:selected").val();
            var _text = $(this).find("option:selected").text();
            $(this).parents(".form-select").addClass("active").find("span").text(_text).data("value", _val);
        });
        $selcet.blur(function () {
            $(this).change();
        });
    })
</script>
</body>
</html>